<template>
    <div class="isPersonalCenter">
        <el-row gutter="20">
            <el-col :span="8">
                <el-card>
                    <template #header>
                        <span>个人信息</span>
                    </template>
                    <div class="profilePhoto">
                        <!-- <img src="@/assets/img/head.jpg" > -->
                        <!-- 图片上传模块 -->
                        <el-upload
                            class="avatar-uploader"
                            action="http://127.0.0.1:3000/uloadone"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>

                    </div>
                    <div class='userInfo'>
                        <el-form class="userInfo-form">
                            <el-form-item label="用户名称" :icon="User">
                                <template #label>
                                    <el-icon class="h32px mr-5px line-height-32px"><User /></el-icon>
                                    <span>用户名称</span>
                                </template>
                                <el-text>小白</el-text>
                            </el-form-item>
                            <el-form-item label="手机号码" >
                                <template #label>
                                    <el-icon class="h32px mr-5px line-height-32px"><Iphone /></el-icon>
                                    <span>手机号码</span>
                                </template>
                                <el-text>13578547854</el-text>
                            </el-form-item>
                            <el-form-item label="用户邮箱">
                                <template #label>
                                    <el-icon class="h32px mr-5px line-height-32px"><Postcard /></el-icon>
                                    <span>用户邮箱</span>
                                </template>
                                <el-text>123456@qq.com</el-text>
                            </el-form-item>
                            <el-form-item label="所属角色">
                                <template #label>
                                    <el-icon class="h32px mr-5px line-height-32px"><User /></el-icon>
                                    <span>所属角色</span>
                                </template>
                                <el-text>超级管理员</el-text>
                            </el-form-item>
                            <el-form-item label="创建日期">
                                <template #label>
                                    <el-icon class="h32px mr-5px line-height-32px"><Calendar /></el-icon>
                                    <span>所属角色</span>
                                </template>
                                <el-text>2024-7-10</el-text>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card>
                    <template #header> 基本资料</template>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="基本资料" name="first">
                            <el-form label-width="100">
                                <el-form-item label="用户名称">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="手机号码">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <el-radio-group>
                                        <el-radio value="0">男</el-radio>
                                        <el-radio value="1">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary">保存</el-button>
                                    <el-button>关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="修改密码">
                            <el-form label-width="100">
                                <el-form-item label="旧密码">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="新密码">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码">
                                    <el-input></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary">保存</el-button>
                                    <el-button>关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const imageUrl = ref('')
const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  ElMessage.success('上传成功')
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('头像图片必须为JPG格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像图片大小不能超过2MB!')
    return false
  }
  return true
}


//进入页面Tabs选择打开哪一个
const activeName = ref('first')
</script>
<style scoped lang="less">
.isPersonalCenter{
    padding: 50px 30px;
}
.profilePhoto{
    height: 125px;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #a6a9ad;
    position: relative;
    img{
        width: 100px;
        border-radius: 50%;
    }
    .avatar-uploader .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
}
.userInfo-form{
    .el-form-item{
        margin: 10px 10px;
        .el-text{
            width: 100%;
            text-align: right;
        }
    }

}


</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 140px;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  
}
</style>